<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2-13</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        院系:<input type="text" v-model="department">
        <hr>
        <p>学生姓名:<input type="text" v-model="student. name"></p>
        <p>学生年龄:<input type="number" v-model="student. age" ></p>
    </div>
</body>
</html>
<script>
   const comApp = {
        data: () => ({
            department:'软件学院',
            student:{
                name:'张三',
                age:18
            }
        }),
        watch:{
            department:{
                handler(newData,oldData){
                    console.log('newData:' + newData)
                    console.log('oldData:' + oldData)
                }
            },
            student:{
                deep:true,
                handler(newData,oldData){
                    console.log('newData:' + newData.age)
                    console.log('oldData:' + oldData.age)
                }
            }
        }
    };
    Vue.createApp(appCom).mount('#app')
</script>